/******************** 变量 ********************/
$tooltip-max-width: 4.8rem;
$tooltip-distance: 0.08rem;
$tooltip-arrow-width: 0.08rem;
$tooltip-arrow-distance: 0.16rem;

$tooltip-text-color-dark: #e6e6e6;
$tooltip-bg-color-dark: #272933;
$tooltip-box-shadow-dark: 0 0.02rem 0.08rem 0 rgba(#000000, 0.5);

$tooltip-text-color-light: #1a1a1a;
$tooltip-bg-color-light: #ffffff;
$tooltip-box-shadow-light: 0 0.02rem 0.08rem 0 rgba(#1a1a1a, 0.15);

/******************** mixin ********************/

/******************** 组件 ********************/
lv-tooltip {
  display: inline-block;
  font-size: $font-size-base;
  line-height: $line-height-base;
}

.lv-tooltip-z-index .cdk-overlay-pane {
  max-height: max-content;
}

.lv-tooltip {
  font-size: $font-size-base;
  line-height: $line-height-base;

  &-container {
    position: relative;
    width: max-content;
    max-width: $tooltip-max-width;
  }

  .lv-tooltip-inner {
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    padding: $tooltip-distance;
    white-space: pre-wrap; // TODO: 影响了使用html设置内容时，标签换行会造成样式异常，当前浏览器不再需要，待浏览器版本稳定后再做修复
    text-align: left;
    text-decoration: none;
    word-wrap: break-word;
    word-break: break-word;
    border-radius: $border-radius-md;

    > span {
      display: block;
      width: 100%;
    }
  }

  .lv-tooltip-icon {
    position: relative;
    top: 0.02rem;
    flex-shrink: 0;
    width: $icon-size-base;
    height: $icon-size-base;
    margin-right: $margin-sm;
  }

  &.lv-tooltip-theme-dark {
    .lv-tooltip-inner {
      color: $tooltip-text-color-dark;
      background-color: $tooltip-bg-color-dark;
      box-shadow: $tooltip-box-shadow-dark;
    }
  }

  &.lv-tooltip-theme-light {
    .lv-tooltip-inner {
      color: $tooltip-text-color-light;
      background-color: $tooltip-bg-color-light;
      box-shadow: $tooltip-box-shadow-light;
    }
  }
}

.lv-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.lv-tooltip-layout-flex {
  display: flex;
}

// 提示框位置
.lv-tooltip {
  &-position-top,
  &-position-topLeft,
  &-position-topRight {
    .lv-tooltip-container {
      margin-bottom: $margin-xs;
    }
  }

  &-position-right,
  &-position-rightTop,
  &-position-rightBottom {
    .lv-tooltip-container {
      margin-left: $margin-xs;
    }
  }

  &-position-bottom,
  &-position-bottomLeft,
  &-position-bottomRight {
    .lv-tooltip-container {
      margin-top: $margin-xs;
    }
  }

  &-position-left,
  &-position-leftTop,
  &-position-leftBottom {
    .lv-tooltip-container {
      margin-right: $margin-xs;
    }
  }
}

.lv-tooltip-show-arrow {
  &.lv-tooltip {
    &-position-top,
    &-position-topLeft,
    &-position-topRight {
      .lv-tooltip-container {
        padding-bottom: $tooltip-distance;

        .lv-tooltip-inner {
          box-shadow: 0 0.02rem 0.16rem $shadow-color;
        }
      }
    }

    &-position-right,
    &-position-rightTop,
    &-position-rightBottom {
      .lv-tooltip-container {
        padding-left: $tooltip-distance;

        .lv-tooltip-inner {
          box-shadow: -0.02rem 0 0.16rem $shadow-color;
        }
      }
    }

    &-position-bottom,
    &-position-bottomLeft,
    &-position-bottomRight {
      .lv-tooltip-container {
        padding-top: $tooltip-distance;

        .lv-tooltip-inner {
          box-shadow: 0 -0.02rem 0.16rem $shadow-color;
        }
      }
    }

    &-position-left,
    &-position-leftTop,
    &-position-leftBottom {
      .lv-tooltip-container {
        padding-right: $tooltip-distance;

        .lv-tooltip-inner {
          box-shadow: 0.02rem 0 0.16rem $shadow-color;
        }
      }
    }
  }
}

// 小三角位置
.lv-tooltip {
  // 上方
  &-position-top &-arrow,
  &-position-topCenter &-arrow,
  &-position-topLeft &-arrow,
  &-position-topRight &-arrow {
    bottom: 0;
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
  }

  &-position-top.lv-tooltip-theme-light &-arrow,
  &-position-topCenter.lv-tooltip-theme-light &-arrow,
  &-position-topLeft.lv-tooltip-theme-light &-arrow,
  &-position-topRight.lv-tooltip-theme-light &-arrow {
    border-top-color: $tooltip-bg-color-light;
  }

  &-position-top.lv-tooltip-theme-dark &-arrow,
  &-position-topCenter.lv-tooltip-theme-dark &-arrow,
  &-position-topLeft.lv-tooltip-theme-dark &-arrow,
  &-position-topRight.lv-tooltip-theme-dark &-arrow {
    border-top-color: $tooltip-bg-color-dark;
  }

  &-position-top &-arrow,
  &-position-topCenter &-arrow {
    left: 50%;
    margin-left: -$tooltip-arrow-width;
  }

  &-position-topLeft &-arrow {
    left: $tooltip-arrow-distance;
  }

  &-position-topRight &-arrow {
    right: $tooltip-arrow-distance;
  }

  // 右方
  &-position-right &-arrow,
  &-position-rightCenter &-arrow,
  &-position-rightTop &-arrow,
  &-position-rightBottom &-arrow {
    left: 0;
    border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
  }

  &-position-right.lv-tooltip-theme-light &-arrow,
  &-position-rightCenter.lv-tooltip-theme-light &-arrow,
  &-position-rightTop.lv-tooltip-theme-light &-arrow,
  &-position-rightBottom.lv-tooltip-theme-light &-arrow {
    border-right-color: $tooltip-bg-color-light;
  }

  &-position-right.lv-tooltip-theme-dark &-arrow,
  &-position-rightCenter.lv-tooltip-theme-dark &-arrow,
  &-position-rightTop.lv-tooltip-theme-dark &-arrow,
  &-position-rightBottom.lv-tooltip-theme-dark &-arrow {
    border-right-color: $tooltip-bg-color-dark;
  }

  &-position-right &-arrow,
  &-position-rightCenter &-arrow {
    top: 50%;
    margin-top: -$tooltip-arrow-width;
  }

  &-position-rightTop &-arrow {
    top: $tooltip-arrow-distance;
  }

  &-position-rightBottom &-arrow {
    bottom: $tooltip-arrow-distance;
  }

  // 下方
  &-position-bottom &-arrow,
  &-position-bottomCenter &-arrow,
  &-position-bottomLeft &-arrow,
  &-position-bottomRight &-arrow {
    top: 0;
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
  }

  &-position-bottom.lv-tooltip-theme-light &-arrow,
  &-position-bottomCenter.lv-tooltip-theme-light &-arrow,
  &-position-bottomLeft.lv-tooltip-theme-light &-arrow,
  &-position-bottomRight.lv-tooltip-theme-light &-arrow {
    border-bottom-color: $tooltip-bg-color-light;
  }

  &-position-bottom.lv-tooltip-theme-dark &-arrow,
  &-position-bottomCenter.lv-tooltip-theme-dark &-arrow,
  &-position-bottomLeft.lv-tooltip-theme-dark &-arrow,
  &-position-bottomRight.lv-tooltip-theme-dark &-arrow {
    border-bottom-color: $tooltip-bg-color-dark;
  }

  &-position-bottom &-arrow,
  &-position-bottomCenter &-arrow {
    left: 50%;
    margin-left: -$tooltip-arrow-width;
  }

  &-position-bottomLeft &-arrow {
    left: $tooltip-arrow-distance;
  }

  &-position-bottomRight &-arrow {
    right: $tooltip-arrow-distance;
  }

  // 左方
  &-position-left &-arrow,
  &-position-leftCenter &-arrow,
  &-position-leftTop &-arrow,
  &-position-leftBottom &-arrow {
    right: 0;
    border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
  }

  &-position-left.lv-tooltip-theme-light &-arrow,
  &-position-leftCenter.lv-tooltip-theme-light &-arrow,
  &-position-leftTop.lv-tooltip-theme-light &-arrow,
  &-position-leftBottom.lv-tooltip-theme-light &-arrow {
    border-left-color: $tooltip-bg-color-light;
  }

  &-position-left.lv-tooltip-theme-dark &-arrow,
  &-position-leftCenter.lv-tooltip-theme-dark &-arrow,
  &-position-leftTop.lv-tooltip-theme-dark &-arrow,
  &-position-leftBottom.lv-tooltip-theme-dark &-arrow {
    border-left-color: $tooltip-bg-color-dark;
  }

  &-position-left &-arrow,
  &-position-leftCenter &-arrow {
    top: 50%;
    margin-top: -$tooltip-arrow-width;
  }

  &-position-leftTop &-arrow {
    top: $tooltip-arrow-distance;
  }

  &-position-leftBottom &-arrow {
    bottom: $tooltip-arrow-distance;
  }
}

.lv-tooltip-z-index {
  z-index: $zindex-tooltip;
}
